/* 文字加粗 */
.f-bold {
  font-weight: bold;
}

.f-light {
  font-weight: lighter;
}

/* 字体大小 */
.fs-12 {
  font-size: 12px;
}

.fs-14 {
  font-size: 14px;
}

.fs-16 {
  font-size: 16px;
}

.fs-17 {
  font-size: 17px;
}

.fs-18 {
  font-size: 18px;
}

.fs-20 {
  font-size: 20px;
}

.fs-28 {
  font-size: 28px;
}
.fs-30 {
  font-size: 30px;
}

.fs-34 {
  font-size: 34px;
}

.fs-40 {
  font-size: 40px;
}

/* 外边距-margin */
.m-5 {
  margin: 5px;
}

.m-8 {
  margin: 8px;
}

.m-10 {
  margin: 10px;
}

.m-l-5 {
  margin-left: 5px;
}

.m-l-8 {
  margin-left: 8px;
}

.m-l-10 {
  margin-left: 10px;
}

.m-l-20 {
  margin-left: 20px;
}

.m-l-48 {
  margin-left: 48px;
}

.m-r-5 {
  margin-right: 5px;
}

.m-r-8 {
  margin-right: 8px;
}

.m-r-10 {
  margin-right: 10px;
}

.m-r-20 {
  margin-right: 20px;
}

.m-r-30 {
  margin-right: 30px;
}

.m-r-48 {
  margin-right: 48px;
}

.m-b-5 {
  margin-bottom: 5px;
}

.m-b-8 {
  margin-bottom: 8px;
}

.m-b-10 {
  margin-bottom: 10px;
}

.m-b-15 {
  margin-bottom: 15px !important;
}

.m-b-20 {
  margin-bottom: 20px !important;
}

.m-b-25 {
  margin-bottom: 25px !important;
}

.m-b-30 {
  margin-bottom: 30px !important;
}

.m-b-40 {
  margin-bottom: 40px !important;
}

.m-b-50 {
  margin-bottom: 50px !important;
}

.m-b-100 {
  margin-bottom: 100px !important;
}

/* 内边距 */
.p-5 {
  padding: 5px !important;
}

.p-8 {
  padding: 8px !important;
}

.p-10 {
  padding: 10px !important;
}

.p-12 {
  padding: 12px !important;
}

.p-15 {
  padding: 15px !important;
}

.p-20 {
  padding: 20px !important;
}

.p-24 {
  padding: 24px;
}

.p-48 {
  padding: 48px;
}

.p-b-5{
  padding-bottom: 5px;
}

.p-b-10{
  padding-bottom: 10px;
}

.p-b-15{
  padding-bottom: 15px;
}

.p-b-20{
  padding-bottom: 20px;
}

.p-b-25{
  padding-bottom: 25px;
}

.p-t-5{
  padding-top: 5px;
}

.p-t-10{
  padding-top: 10px;
}

.p-t-15{
  padding-top: 15px;
}

.p-t-20{
  padding-top: 20px;
}

.p-t-25{
  padding-top: 25px;
}

.p-t-30{
  padding-top: 30px;
}

.p-t-40{
  padding-top: 40px;
}

.p-t-40{
  padding-top: 40px;
}

.p-r-5{
  padding-right: 5px;
}

.p-r-10{
  padding-right: 10px;
}

.p-r-15{
  padding-right: 15px;
}

.p-r-20{
  padding-right: 20px;
}

.p-l-5{
  padding-left: 5px;
}

.p-l-10{
  padding-left: 10px;
}

.p-l-15{
  padding-left: 15px;
}

.p-l-20{
  padding-left: 20px;
}

/* 宽高 */
.w-100 {
  width: 100% !important;
}

.h-100 {
  height: 100% !important;
}

.w-60 {
  width: 60% !important;
}

.h-60 {
  height: 60% !important;
}

.w-50 {
  width: 50% !important;
}

.h-50 {
  height: 50% !important;
}

/* flex */
.flex-left{
  display: flex;
  justify-content: flex-start;
}

.flex-left-center{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}


.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex-between-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-col-between-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

/* 圆角 */
.r5 {
  border-radius: 50%;
}

.r-5 {
  border-radius: 5px;
}

.r-8 {
  border-radius: 8px;
}

.r-10 {
  border-radius: 10px;
}

.r-15 {
  border-radius: 15px;
}

.r-25 {
  border-radius: 25px;
}

.r-30 {
  border-radius: 30px;
}

.r-60 {
  border-radius: 60px;
}

.rl-60 {
  border-top-left-radius: 60px;
}

.rr-60 {
  // border-top:
  border-top-right-radius: 60px;
}

/* 定位 */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}